<template>
  <view class="container">
    <view class="order-header">
      <image class="logo" src="/static/img/BodycheckImage/logo.png"></image>
      <text class="title">太原市太航医院体检中心</text>
    </view>
    <view class="order-item">
      <image class="item-image" src="/static/img/BodycheckImage/shop1.jpg"></image>
      <view class="item-details">
        <text class="item-name">入职体检--太原市太航医院</text><br>
        <text>男女通用</text><br>
        <text class="item-price">¥100.00</text>
      </view>
    </view>
    <view class="appointment-info">
      <view class="picker-container">
        <text>预约人:</text>
        <picker mode="selector" :range="appointmentPeople" @change="onPeopleChange">
          <view class="picker-item">
            <text v-if="selectedPeople === '添加就诊人'" @click.stop="addPerson">添加就诊人</text>
            <text v-else>{{ selectedPeople || '请选择预约人' }}</text>
          </view>
        </picker>
      </view>
      <view class="picker-container">
        <text>预约日期:</text>
        <picker mode="date" @change="onDateChange" :value="selectedDate">
          <view class="picker-item">
            <text>{{ selectedDate || '请选择日期' }}</text>
          </view>
        </picker>
      </view>
    </view>
    <view class="time-slot">
      <view class="picker-container">
        <text>选择时段:</text>
        <picker mode="selector" :range="timeSlots" @change="onTimeSlotChange">
          <view class="picker-item">
            <text>{{ selectedTimeSlot }}</text>
          </view>
        </picker>
      </view>
    </view>
    <view class="vip-section">
      <image class="vip-image" src="/path/to/vip-image.jpg"></image>
      <view class="vip-details">
        <text class="vip-title">VIP会员价￥129立减5元</text>
        <text class="vip-subtitle">12.9/月立即开通 ></text>
      </view>
    </view>
    <view class="coupon-section">
      <view class="coupon-item">
        <text>平台优惠券</text>
        <text>暂无可用 ></text>
      </view>
      <view class="coupon-item">
        <text>会员优惠券</text>
        <text>暂无可用 ></text>
      </view>
    </view>
    <view class="price-detail">
      <view class="price-item">
        <text>商品金额总计</text>
        <text>¥100.00</text>
      </view>
      <view class="price-item">
        <text>运费</text>
        <text>¥0.00</text>
      </view>
      <view class="price-item">
        <text>优惠金额</text>
        <text>-¥0.00</text>
      </view>
    </view>
    <view class="agreement">
      <checkbox-group>
        <label>
          <checkbox value="agree" checked />
          <text>我已阅读并同意《健康山西商城服务协议》《知情同意书》</text>
        </label>
      </checkbox-group>
    </view>
    <button class="submit-button" @click="submitOrder">提交订单</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      appointmentPeople: ['张三', '李四', '王五', '添加就诊人'],
      selectedPeople: '', // 默认为空，表示未选择
      dates: ['2025-01-01', '2025-01-02', '2025-01-03', '2025-01-04'],
      selectedDate: '',
      selectedDateIndex: -1, // 使用 -1 表示未选择
      timeSlots: ['08:00-10:00', '10:00-12:00', '14:00-16:00'],
      selectedTimeSlot: '08:00-10:00'
    };
  },
  methods: {
    onPeopleChange(e) {
      const index = e.detail.value;
      const selectedOption = this.appointmentPeople[index];
      
      if (selectedOption === '添加就诊人') {
        this.selectedPeople = selectedOption; // 设置当前选择为“添加就诊人”
        this.addPerson(); // 执行添加就诊人的逻辑
      } else {
        this.selectedPeople = selectedOption;
      }
    },
    addPerson() {
      uni.navigateTo({
        url: '/pages/Hoem/Bodycheck/shopping/Order/AddPerson/AddPerson' // 使用 uni-app 的页面跳转
      });
    },
    onDateChange(e) {
      this.selectedDate = e.detail.value;
      this.selectedDateIndex = this.dates.indexOf(this.selectedDate);
    },
    onTimeSlotChange(e) {
      this.selectedTimeSlot = this.timeSlots[e.detail.value];
    },
    submitOrder() {
      if (!this.selectedPeople || !this.selectedDate || !this.selectedTimeSlot) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' });
        return;
      }
      console.log('预约人: ' + this.selectedPeople);
      console.log('预约时间: ' + this.selectedDate);
      console.log('选择时段: ' + this.selectedTimeSlot);
      // 这里可以添加实际的提交逻辑
    }
  }
};
</script>

<style scoped>
.container {
  padding: 16px;
  background-color: #f5f5f5;
}
.order-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}
.logo {
  width: 40px;
  height: 40px;
  margin-right: 16px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.order-item {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
}
.item-image {
  width: 100px;
  height: 100px;
  margin-right: 16px;
}
.item-details {
  flex: 1;
}
.item-name {
  font-size: 16px;
  font-weight: bold;
}
.item-price {
  color: #ff0000;
  font-size: 18px;
}
.appointment-info, .time-slot {
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
}
.picker-container {
  display: flex;
  align-items: center;
}
.picker-item {
  flex: 1;
  text-align: center;
  border: 1px solid #e0e0e0;
  padding: 8px;
  border-radius: 8px;
}
.submit-button {
  background-color: #007aff;
  color: white;
  padding: 12px;
  text-align: center;
  border-radius: 5px;
  margin: 16px;
}
.vip-section {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #ffe0a8;
  border-radius: 8px;
  margin-bottom: 16px;
}
.vip-image {
  width: 100px;
  height: 100px;
  margin-right: 16px;
}
.vip-title {
  font-size: 18px;
  font-weight: bold;
  color: #ff0000;
}
.vip-subtitle {
  font-size: 16px;
  color: #888888;
}
.coupon-section {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.coupon-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.price-detail {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.price-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.agreement {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
</style>